<template>
  <div id="personal" v-if="userInfo.name">
    <el-tabs type="border-card">
      <el-tab-pane label="最近">
        <lately></lately>
      </el-tab-pane>
      <el-tab-pane label="点赞">
        <thumbs></thumbs>
      </el-tab-pane>
      <el-tab-pane label="收藏">
        <collection></collection>
      </el-tab-pane>
    </el-tabs>
  </div>
  <div class="empty" v-else>
    <el-empty description="登录后即可使用历史记录功能">
    </el-empty>
  </div>
</template>
 
<script>
import lately from "@/components/personal/lately"
import thumbs from "@/components/personal/thumbs"
import collection from "@/components/personal/collection"
import {mapState} from "vuex"
export default {
  name: 'personal',
  components:{
    lately,thumbs,collection
  },
  computed:{
    ...mapState(["userInfo"])
  },
  data(){
    return{

    }
  }
}
</script>

<style scoped lang='less'>
#personal{
  width: 1200px;
  margin: 0 auto;
  max-height: 400px;
  overflow-y: auto;
}
</style>